<template>
	<view class="message">
		<view class="title">
			<view class="title_search">
				<u-search placeholder="搜索商户名称、商户UID、门店ID" v-model="keyword" shape="square" @custom="shopSearch" :input-style="inputStyle"></u-search>
			</view>
			<view class="title_tab">
				<u-tabs :list="tab.list" :is-scroll="false" :current="tab.current" @change="tabchange" font-size="28" active-color="#007AFF"></u-tabs>
			</view>
		</view>
		<!-- <view v-if="shop.shopdataList.length==0" class="content">
			<noData></noData>
		</view> -->
		<!-- <scroll-view class="content" scroll-y="true"> -->
		<view class="content">
			<view class="conList_item" @click="navDetail('1')">
				<view class="conList_title">
					<view class="title_name">
						<text>1111111</text>
						<text class="title_size">1111111</text>
					</view>
					<view class="title_id">
						<text>UID:&nbsp&nbsp111111111</text>
					</view>
				</view>
				<view class="conList_detail">
					<view class="conList_info">
						<view class="info_title">工单分类</view>
						<view class="info_Text">11111</view>
					</view>
					<view class="conList_info">
						<view class="info_title">下发时间</view>
						<view class="info_Text">2222</view>
					</view>
				</view>
			</view>
		</view>
		<!-- </scroll-view> -->
		
	</view>
</template>

<script>
	import { m3shop } from '../../api/index.js'
	import noData from '../../components/data/nodata.vue'
	export default {
		data() {
			return {
				inputStyle:{
					'font-size':'16px'
				},
				keyword:"",
				tab:{
					list: [{
						name: '全部'
					}, {
						name: '待受理'
					}, {
						name: '受理中'
					}, {
						name: '已完成'
					}, {
						name: '已撤回'
					}],
					current: 0
				},
				statusColor:{
					'1':'bluefont',//升级通过
					'2':'orangefont',//升级中
					'3':'redfont' //升级失败
				},
				//弹窗对象
				poptype:{
					type:'1', //当前显示的类型 0:未入住 1:已入驻
					show:false, //弹窗是否显示
				},
				shop:{
					shopstatus:'',
					page:1,
					limit:10,
					isLoad:false,//判断之前的请求是否还未结束
					isAll:false,//判断是否加载了全部数据
					shopdataList:[{}]
				},
				statusColor:{
					'1':'bluefont',//升级成功
					'0':'orangefont',//升级中
					'2':'redfont', //升级失败
				}
			}
		},
		onLoad:function(){
			
		},
		onShow:function(){
			// this.shop.page = 1;
			// this.shop.isAll = false;
			// this.getshoplist(true);
		},
		methods: {
			tabchange:function(index){
				let indexObj = {
					'0':'',//全部
					'1':'2',//升级失败
					'2':'1',//升级成功
					'3':'0' //升级中
				};
				this.shop.shopstatus = indexObj[index];
				this.shop.page = 1;
				this.shop.isAll = false;
				this.tab.current = index;
				this.getshoplist(true)
			},
			shopSearch:function(){
				this.shop.page = 1;
				this.shop.isAll = false;
				this.getshoplist(true)
			},
			powerSure:function(){
				
			},
			typeSw:function(type){
				this.poptype.type = type;
			},
			//获取我的商户列表
			getshoplist:function(isSw){
				let that = this;
				if(isSw){ //如果是切换逻辑
					this.shop.isAll = false;
					this.shop.isLoad = false;
					this.shop.page = 1;
				}else{ //如果是列表加载逻辑
					if(this.shop.isLoad || this.shop.isAll){ //假如之前的请求未完成或者列表数据已经全部加载完毕，则返回空
						console.log("请求未完成或者列表数据已经全部加载完毕")
						return ;
					}
					this.shop.isLoad = true;
				}
				console.log({
					status:that.shop.shopstatus,
					page:that.shop.page
				})
				m3shop({
					keyword:that.keyword,
					status:that.shop.shopstatus,
					page:that.shop.page
				}).then((data) => {
					console.log(data)
					let deallist = that.deallist(data.data);//返回已处理的数据
					that.shop.mycount = data.data.shop_count;
					if(isSw === true){//判断是否重新加载数据
						that.shop.shopdataList = deallist;
					}else{
						that.shop.shopdataList = that.shop.shopdataList.concat(deallist);
					}
					
					that.shop.page += 1;
					that.shop.isLoad = false;
					if(deallist.length < that.shop.limit){
						that.shop.isAll = true;
					}
					console.log(that.shop.shopdataList)
				}).catch((e)=>{
					console.log(e);
				})
			},
			deallist:function(datalist){
				let statusTextObj = {
					'0':'升级中',
					'1':'升级成功',
					'2':'升级失败'
				};
				datalist.forEach((val,index,arr)=>{
					val.statusText = statusTextObj[val.status]
				})
				return datalist;
			},
			navDetail:function(id){
				uni.navigateTo({
					url:`../messageDetail/messageDetail?id=${id}`
				})
			}
		},
		components:{
			noData
		}
	}
</script>

<style lang="scss" scoped>
	.message{
		height: 100%;
		font-size: $uni-font-size-base;
		position: relative;
		.title{
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			width: 100%;
			background-color: #FFFFFF;
			.title_search{
				padding: 20rpx 30rpx;
				border: 1rpx solid #E6E6E6;
			}
		}
		.content{
			height: 100%;
			padding-top: 188rpx;
			background-color: #F5F5F5;
			box-sizing: border-box;
			.conList_item{
				margin: 20rpx 30rpx 20rpx 30rpx;
				padding: 30rpx;
				border-radius: $uni-border-radius-base;
				background-color: #FFFFFF;
				.conList_title{
					.title_name{
						color: $uni-text-color;
						font-size: $uni-font-size-lg;
						font-weight: bold;
						.title_size{
							float: right;
							font-weight: normal;
							font-size: $uni-font-size-base;
							&.red{
								color: #F94441;
							}
							&.blue{
								color: #007AFF;
							}
						}
					}
					.title_id{
						color: $uni-text-color-grey;
						font-size: $uni-font-size-sm;
						padding: 10rpx 0 20rpx 0;
						text{
							margin-right: 20rpx;
						}
					}
				}
				.conList_detail{
					.conList_info{
						padding: 15rpx 0;
						font-size: $uni-font-size-base;
						display: flex;
						justify-content: flex-start;
						.info_title{
							color: $uni-text-color-grey;
							width: 25%;
						}
						.info_Text{
							width: 75%;
						}
					}
				}
			}
		}
	}
	.nodata{
		margin-top: 100rpx;
	}
</style>
